<template>
    <div id="app">
      <form-create v-model="formData" v-model:api="formApi" :rule="formRules" @submit="handleSubmit" />
  
      <!-- 显示接口返回的消息的模态框 -->
      <div v-if="showModal" class="modal-overlay" @click="hideModal">
        <div class="modal-content" @click.stop>
          <h2 class="modal-title">接口返回消息</h2>
          <div class="modal-body">
            <pre><strong>Status Code:</strong> {{ statusCode }}</pre>
            <pre><strong>Response Data:</strong> {{ responseData }}</pre>
            <pre><strong>Error Message:</strong> {{ errorMessage }}</pre>
          </div>
          <button class="modal-close" @click="hideModal">关闭</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios'; // 引入 axios 库
  
  // 表单数据
  const formData = ref({});
  // 表单 API 实例
  const formApi = ref(null);
  // 控制模态框的显示
  const showModal = ref(false);
  // 接口返回的消息
  const responseData = ref('');
  const statusCode = ref('');
  const errorMessage = ref('');
  
  // 表单规则
  const formRules = ref([
  {
    "type": "input",
    "field": "JCID",
    "title": "集采ID",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fcu2m0qi0incb0c",
    "name": "ref_Feanm0ozt0r9ffc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "AUART",
    "title": "订单类型",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fda6m0ozt0r9fec",
    "name": "ref_Feanm0ozt0r9ffc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "VKORG",
    "title": "销售组织",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fm1dm0ozt7hcfhc",
    "name": "ref_Feanm0ozt0r9ffc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "VTWEG",
    "title": "分销渠道",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fvw1m0oztenjfjc",
    "name": "ref_Feanm0ozt0r9ffc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "SPART",
    "title": "分部",
    "info": "",
    "$required": false,
    "_fc_id": "id_F5orm0oztmg5flc",
    "name": "ref_Feanm0ozt0r9ffc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "KUNNR",
    "title": "客户编号",
    "info": "",
    "$required": false,
    "_fc_id": "id_Frk5m0oztvs4fnc",
    "name": "ref_Feanm0ozt0r9ffc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "BSTNK",
    "title": "客户参考",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fcogm0ozu06tfpc",
    "name": "ref_Feanm0ozt0r9ffc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "AUGRU",
    "title": "订单原因",
    "info": "",
    "$required": false,
    "_fc_id": "id_Faulm0ozucvwfrc",
    "name": "ref_Feanm0ozt0r9ffc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "group",
    "field": "item",
    "title": "项目信息",
    "info": "",
    "$required": false,
    "props": {
      "rule": [
        {
          "type": "input",
          "field": "MATNR",
          "title": "物料编号",
          "info": "",
          "$required": false,
          "_fc_id": "id_F7hem0ozuvlyfwc",
          "name": "ref_Fe3xm0ozuvlyfxc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "KWMENG",
          "title": "数量",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fk7dm0ozv7kkfzc",
          "name": "ref_Fe3xm0ozuvlyfxc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "MEINS",
          "title": "单位",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fipnm0ozvfs4g1c",
          "name": "ref_Fe3xm0ozuvlyfxc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "WERKS",
          "title": "工厂",
          "info": "",
          "$required": false,
          "_fc_id": "id_F0f5m0ozvnvqg3c",
          "name": "ref_Fe3xm0ozuvlyfxc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "LGORT",
          "title": "库存地点",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fqj2m0ozvvphg5c",
          "name": "ref_Fe3xm0ozuvlyfxc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "KSCHL",
          "title": "条件类型",
          "info": "",
          "$required": false,
          "_fc_id": "id_Flrum0ozw40dg7c",
          "name": "ref_Fe3xm0ozuvlyfxc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "KBETR",
          "title": "金额",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fw1em0ozwdjzg9c",
          "name": "ref_Fe3xm0ozuvlyfxc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "WAERK",
          "title": "货币单位",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fpwdm0ozwizogbc",
          "name": "ref_Fe3xm0ozuvlyfxc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "PSTYV",
          "title": "销售凭证项目类别",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fbzqm0ozwxgkgdc",
          "name": "ref_Fe3xm0ozuvlyfxc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        }
      ]
    },
    "_fc_id": "id_F54lm0ozutb7ftc",
    "name": "ref_Fnlam0ozutb7fuc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "group"
  }
]);
  
  // 隐藏模态框的函数
  const hideModal = () => {
    showModal.value = false;
  };
  
  // 提交表单的函数
  const handleSubmit = async (data) => {
    console.log('提交的数据:', JSON.stringify(data, null, 2));
    try {
      const username = 'IT10';
      const password = '654321';
      const encodedCredentials = btoa(`${username}:${password}`);
      const response = await axios.post('/zjcpt/ZFM_JICAI_13?sap-client=700', data, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Basic ' + encodedCredentials
        }
      });
  
      // 调试信息
      console.log('接口返回完整响应:', response);
  
      // 处理接口的响应
      responseData.value = JSON.stringify(response.data, null, 2);
      statusCode.value = response.status;
      errorMessage.value = '';
      showModal.value = true; // 显示模态框
    } catch (error) {
      // 调试信息
      console.error('提交失败:', error);
  
      // 处理错误情况
      if (error.response) {
        console.log('错误响应:', error.response);
        responseData.value = JSON.stringify(error.response.data, null, 2);
        statusCode.value = error.response.status;
        errorMessage.value = error.response.data.message || '提交失败，请重试。';
      } else {
        responseData.value = '';
        statusCode.value = '';
        errorMessage.value = '提交失败，请重试。';
      }
      showModal.value = true; // 显示模态框
    }
  };
  </script>
  
  <style scoped>
  /* 样式可根据需要调整 */
  .response-message {
    margin-top: 20px;
    color: #409eff;
  }
  
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 80%;
    width: 600px; /* 适应屏幕宽度 */
    max-height: 80%; /* 适应屏幕高度 */
    overflow: auto; /* 添加滚动条 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
  }
  
  .modal-title {
    margin: 0;
    font-size: 1.5em;
    color: #333;
  }
  
  .modal-body {
    margin-top: 10px;
    color: #333;
    overflow-y: auto; /* 内部滚动条 */
  }
  
  .modal-body pre {
    white-space: pre-wrap; /* 保持换行 */
    word-break: break-word; /* 自动换行 */
    background: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: auto;
  }
  
  .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ff4d4d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1em;
  }
  
  .modal-close:hover {
    background: #e60000;
  }
  </style>
  